<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8">
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/math.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/shCore.js"></script> 
	<script type="text/javascript" src="js/shBrushJScript.js"></script> 
	<script type="text/javascript" src="js/shBrushCpp.js"></script> 
	<script type="text/javascript" src="js/shBrushPython.js"></script> 
	<link type="text/css" rel="stylesheet" href="css/shCoreDefault.css"/> 
	<link type="text/css" rel="stylesheet" href="css/shThemeEclipse.css"/> 
	<script type="text/javascript">SyntaxHighlighter.all();</script>
<title>css_menu</title>

</head>
<body>
	<div id="header">
		<h1 id="heading">Memory Snippets</h1>
		<div id="sitenav">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="index.html">Blog</a></li>
				<li><a href="index.html">Wiki</a></li>
				<li><a href="index.html">About</a></li>
			</ul>
		</div>	
	</div>
	<div id="content">
<div id="page">
<h2 id="toc_0.1">用CSS实现下拉菜单</h2>

<p>
2011-06-08 14:55:53
</p>


<p>
下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由 javascript 来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起 javascript 来，使用 CSS 制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯 CSS 下拉菜单，现在我们就利用 IE条件注释来制作一个纯 CSS 下拉菜单。为了便于理解，选择了很很简单的代码，至于更复杂的，大家可以触类旁通、举一反三。
</p>

<p>
XHTML 代码：
</p>
<pre  class=brush:html>
&lt;dl&gt;
	&lt;dt&gt;一级菜单&lt;/dt&gt;
	&lt;dd&gt;二级菜单&lt;/dd&gt;
	&lt;dd&gt;二级菜单&lt;/dd&gt;
	&lt;dd&gt;二级菜单&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<p>
CSS 代码：
</p>
<pre>
dd { display:none; }
dl:hover dd { display:block; }
</pre>
<p>
查看Demo
</p>

<p>
在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。 既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML 代码改写成:
</p>
<pre>
&lt;dl&gt;
	&lt;dt&gt;一级菜单&lt;/dt&gt;
	&lt;dd&gt;二级菜单&lt;/dd&gt;
	&lt;dd&gt;二级菜单&lt;/dd&gt;
	&lt;dd&gt;二级菜单&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<p>
CSS 代码改写成：
</p>
<pre>
dd { display:none; }
dl:hover dd, a:hover dd { display:block; }
</pre>
<p>
查看Demo
</p>

<p>
然而在 IE6 中依然没有效果，为什么呢？难道代码有错？其实代码没有错，这是 IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即 CSS 代码再次改写成：
</p>
<pre>
dd { display:none; }
dl:hover dd, a:hover dd { display:block; }
a:hover { border:0; }
</pre>
<p>
查看效果
</p>

<p>
此时在 IE6 中鼠标移动到上面下拉菜单出现了。然而给每个菜单加上连接的时候，IE6 里又不行了，为什么？为什么？不知道。。。不过再给 IE条件注释里的 a 标签里再套上一个表格，即 XHTML 代码改写成如下：
</p>
<pre>
&lt;dl&gt;
	&lt;dt&gt;&lt;a href="#"&gt;一级菜单&lt;/a&gt;&lt;/dt&gt;
	&lt;dd&gt;&lt;a href="#"&gt;二级菜单&lt;/a&gt;&lt;/dd&gt;
	&lt;dd&gt;&lt;a href="#"&gt;二级菜单&lt;/a&gt;&lt;/dd&gt;
	&lt;dd&gt;&lt;a href="#"&gt;二级菜单&lt;/a&gt;&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<p>
查看Demo
</p>

<p>
此时，下拉菜单在 IE6 里没有问题了。
</p>

<p>
更多例子：
</p>
<blockquote>
纯CSS下拉菜单1
纯CSS下拉菜单2
纯CSS下拉菜单3
纯CSS下拉菜单4
纯CSS下拉菜单5
前沿的一个例子
</blockquote>
<hr />
<p>
<a href="http://www.17css.com/a-detailed-explanation-of-the-css-drop-down-menu/">http://www.17css.com/a-detailed-explanation-of-the-css-drop-down-menu/</a>
</p>
	</div>
	</div>
	<div class="clear"></div>
	<div id="footer">
		© Copyright 2011 @liyiqiang. All Rights Reserved.
	</div>
</body>
</html>
